<template>
    <div class="select-scene">
        <el-dialog width="800px" v-dialog-drag :visible.sync="show" :title="title" :close-on-click-modal="false"
            :append-to-body="true" :before-close="closeDialog">
            <div class="content-wrap">
                <div class="tree-box">
                    <el-tree
                        v-if="show"
                        ref="tree"
                        node-key="id"
                        highlight-current
                        lazy
                        default-expand-all
                        :load="loadNode"
                        :props="defaultProps"
                        @node-click="nodeClick">
                    </el-tree>
                </div>
                <div class="table-wrap">
                    <div class="table-box">
                        <el-table :height="400" v-loading="loading" :data="tableData.columnData">
                            <el-table-column label="场景名称" prop="name" key="name" min-width="120" align='left'></el-table-column>
                            <el-table-column label="操作" fixed="right" width="100">
                                <template slot-scope="scope">
                                    <template v-if="multiple">
                                        <el-button type="text" @click="cancleSelectThis(scope.row)" v-if="selection.findIndex(item => item.id == scope.row.id) > -1">已选择</el-button>
                                        <el-button type="text" @click="selectThis(scope.row)" v-else>选择</el-button>
                                    </template>
                                    <el-button type="text" v-else @click="selectThis(scope.row)">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <section class="pagination">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize" layout="sizes,total,prev,pager,next"
                            :current-change.sync="tableData.currentPage" :current-page.sync="tableData.currentPage"
                            :total="tableData.total">
                        </el-pagination>
                    </section>
                </div>
            </div>
            <div slot="footer" v-if="multiple">
                <el-button type="primary" @click="selectAll" :disabled="selection.length == 0">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { sysDictionary } from '@/service/core/dictionary';
    import { pageQueryTempl } from './service.js';
    import {
        queryGoodsList
    } from '@/service/busi/merchant';
    import {
        isArray
    } from '@/utils/Tools';
    import { mapState } from 'vuex'
    export default {
        name: 'selectGoods', // 选择商品组件
        props: {
            multiple: {
                type: Boolean,
                default: false,
            },
        },
        components: {},
        computed: {
            ...mapState({
                systemId: state => state.token.systemId
            })
        },
        data() {
            return {
                show: false,
                title: '选择场景',
                ruleForm: {
                    nameLike: '',
                },
                tableData: {
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    columnData: [],
                },
                selection: [],
                defaultProps: {
                    isLeaf: 'isLeaf'
                },
                treeNode: {},
                loading: false,
            }
        },
        methods: {
            showDialog() {
                this.show = true;
            },
            closeDialog() {
                this.tableData.columnData = [];
                this.selection = [];
                this.show = false;
            },
            loadNode(node, resolve) {
                if(node.level == 0) {
                    sysDictionary('SP_CTEMP_CLASSIFY').then(res => {
                        if(res.data.code == 1000) {
                            let data = res.data.data;
                            if(Array.isArray(data)) {
                                data = data.map((item, index) => {
                                    return {
                                        ...item,
                                        label: item.name,
                                        isLeaf: true
                                    }
                                })
                                resolve(data);
                                setTimeout(() => {
                                    this.nodeClick(data[0]);
                                    this.$refs.tree.setCurrentKey(data[0].id);
                                }, 200)
                            }
                        }else {
                            resolve([]);
                        }
                    }).catch(error => {
                        resolve([])
                    })
                }else {
                    resolve([])
                }
            },
            nodeClick(node) {
                this.treeNode = node;
                this.ruleForm.cateCode = node.valStr;
                this.clickQuery();
            },
            clickQuery() {
                this.tableData.currentPage = 1;
                this.queryList();
            },
            queryList() {
                let params = {
                    columns: this.tableData.columns,
                    orders: this.tableData.orders,
                    startRow: this.tableData.currentPage,
                    rowSize: this.tableData.pageSize,
                    cateCode: this.ruleForm.cateCode,
                    tenementId: 1,
                    status: 'ACTIVE'
                }
                this.loading = true;
                pageQueryTempl(params).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data.data)) {
                            this.tableData.columnData = [...data.data];
                            this.tableData.columnData.forEach((item, index) => {
                                item.sceneCateCode = this.treeNode.valStr,
                                item.sceneCateNames = this.treeNode.name
                            })
                            this.tableData.total = data.total;
                        }else {
                            this.tableData.columnData = [];
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            handleCurrentChange(val) {
                this.tableData.currentPage = val;
                this.queryListFun();
            },
            handleSizeChange(val) {
                this.tableData.currentPage = 1;
                this.tableData.pageSize = val;
                this.queryListFun();
            },
            selectThis(row) {
                if(!this.multiple) {
                    this.$emit('update', row);
                    this.closeDialog();
                }else {
                    this.selection.push(row);
                }
            },
            cancleSelectThis(row) {
                let index = this.selection.findIndex(item => item.id == row.id);
                if(index > -1) {
                    this.selection.splice(index, 1);
                }
            },
            selectAll() {
                this.$emit('update', this.selection);
                this.closeDialog();
            },
        }
    }

</script>

<style lang="scss" scoped>
.content-wrap {
    display: flex;
    flex-direction: row;
    .tree-box {
        width: 220px;
        margin-right: 10px;
        border: 1px solid #ddd;
        padding: 10px;
    }
    .table-wrap {
        flex: 1;
        overflow: hidden;
    }
}
</style>